<template>
  <div class="page-wrap">
    <div class="page-title">CdsLineCountTip</div>
      <el-alert title="这里需要使用两个组件配合使用" type="warning" :closable="false" />
    <div class="page-sub-title">基础用法</div>
    <p>这里提供两种用法：</p>
    <p>1、根据容器宽度自动显示省略号，当省略号显示时，鼠标hover可展示悬浮框显示完整内容，否则不显示悬浮框。</p>
    <p>2、设置显示的最大字符长度，超过部分显示省略号，鼠标hover展示完整内容，否则不显示悬浮框。</p>
    <el-card style="width: 500px">
      <div style="width: 200px;text-align: left;">
          <div class="copy-div">
              <CdsLineCountTip :lineCount="2"
                               :content="text_info"></CdsLineCountTip>
              <CdsCopyButton :content="text_info"></CdsCopyButton>
          </div>
          <div class="copy-div">
              <CdsLineCountTip :lineCount="1"
                               :content="text_info"></CdsLineCountTip>
              <CdsCopyButton  :content="text_info"></CdsCopyButton>
          </div>
        <div class="copy-div">
              <CdsLineCountTip :limitLength="20"
                               :content="text_info"></CdsLineCountTip>
              <CdsCopyButton  :content="text_info"></CdsCopyButton>
          </div>
       
      </div>
    </el-card>
    
    <highlightjs
      language="shell"
      :code="code"
    />
    <div class="page-sub-title">使用插槽</div>
    <p>支持使用插槽自定义内容，使用插槽时，不支持设置最大字符长度（limitLength） </p>
    <el-card style="width: 500px">
      <div style="width: 200px;text-align: left;">
          <div class="copy-div">
              <CdsLineCountTip :lineCount="1">
                  <template v-slot:content>
                      <span style="color: #2167F4;cursor: pointer"  @click="()=>{ElMessage.success('跳转连接')}">支持使用插槽自定义内容，使用插槽时，不支持设置最大字符长度（limitLength）</span>
                  </template>
              </CdsLineCountTip>
              <CdsCopyButton :content="text_info"></CdsCopyButton>
          </div>
      </div>
    </el-card>
    <highlightjs
      language="shell"
      :code="code1"
    />
    <div class="page-sub-title">CdsLineCountTip   Attributes</div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="available"
        label="可选值">
      </el-table-column>
      <el-table-column
        prop="default"
        label="默认值">
      </el-table-column>
    </el-table>
    <div class="page-sub-title">CdsLineCountTip   Slots</div>
    <el-table
      :data="tableData2"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="插槽名">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
    </el-table>
      <el-divider></el-divider>
      <div class="page-sub-title">CdsCopyButton   Attributes</div>
      <el-table
          :data="tableData1"
          style="width: 100%">
          <el-table-column
              prop="field"
              label="参数">
          </el-table-column>
          <el-table-column
              prop="desc"
              label="说明">
          </el-table-column>
          <el-table-column
              prop="type"
              label="类型">
          </el-table-column>
          <el-table-column
              prop="available"
              label="可选值">
          </el-table-column>
          <el-table-column
              prop="default"
              label="默认值">
          </el-table-column>
      </el-table>
  </div>
  
 
</template>

<script setup>
 import {CdsLineCountTip, CdsCopyButton} from "cds-ui-business-components";
//import CdsLineCountTip from "../../../../packages/businessComponents/lineCountTip/src/lineCountTip.vue";

import {ElMessage} from "element-plus";

const text_info = 'The current batch creation limit of the selected instance type is {num}'

const code = `<template>
        <div class="copy-div">
              <CdsLineCountTip :lineCount="2"
                               :content="text_info"></CdsLineCountTip>
              <CdsCopyButton :content="text_info"></CdsCopyButton>
          </div>
          <div class="copy-div">
              <CdsLineCountTip :lineCount="1"
                               :content="text_info"></CdsLineCountTip>
              <CdsCopyButton  :content="text_info"></CdsCopyButton>
          </div>
        <div class="copy-div">
              <CdsLineCountTip :limitLength="20"
                               :content="text_info"></CdsLineCountTip>
              <CdsCopyButton  :content="text_info"></CdsCopyButton>
          </div>
       
       
</template>`

const code1 = `<template>
      <div class="copy-div">
              <CdsLineCountTip :lineCount="1">
                  <template v-slot:content>
                      <span style="color: #2167F4;cursor: pointer"  @click="()=>{ElMessage.success('跳转连接')}">支持使用插槽自定义内容，使用插槽时，不支持设置最大字符长度（limitLength）</span>
                  </template>
              </CdsLineCountTip>
              <CdsCopyButton :content="text_info"></CdsCopyButton>
          </div>
       
</template>`
const tableData = [
  {field: 'content', desc: '文本内容（此属性 权重 大于 插槽）', type: 'string', available: '--', default: '--'},
  {field: 'lineCount', desc: '显示行数', type: 'Number', available: '1-5', default: '1'},
  {field: 'limitLength', desc: '限制的字符个数（设置此属性时，lineCount将失效, 不可使用插槽）', type: 'Number', available: '--', default: '--'},
  {field: 'placement', desc: '设置文字悬浮框的位置，同 el-tooltip', type: 'String', available: '同 el-tooltip', default: 'bottom'},
  {field: 'trigger', desc: '设置文字悬浮框的触发方式， 同 el-tooltip', type: 'String', available: '同 el-tooltip', default: 'hover'},
]

const tableData2 = [
  {name: 'content', desc: '自定义内容'},
]

 const tableData1 = [
     {field: 'content', desc: '文本内容（此属性 权重 大于 插槽）', type: 'string', available: '--', default: '--'},
     
 ]

</script>

<style lang="scss">
pre code.hljs {
  font-size: 14px!important;
  font-family: auto!important;
}
.hljs{
  color: var(--el-text-color-primary);
  background-color: var(--backgroundColor2);
}
.page-wrap {
  text-align: left;
  font-size: 14px;
  .page-title {
    font-size: 36px;
    text-align: left;
    line-height: 100px;
    font-weight: bold;
  }
  
  .page-sub-title {
    font-size: 20px;
    font-weight: bold;
    margin: 24px 0;
  }
  .el-button.is-link{
    color: #2167F4;
  }
    
    .copy-div{
        display: flex;align-items: center;margin: 4px 0;
    }
  
}
</style>
